<template>
  <div>
    <div class="qup-title-box"><span class="border" /><span>走访整改基本信息</span></div>

    <c-list
      ref="form"
      v-loading="baseInfoLoading"
      label-width="130px"
      :column="3"
    >
      <c-list-item type="text" label="门店编码" :value="shopDetail.shopCode" />
      <c-list-item :span="2" type="text" label="门店名称" :value="shopDetail.shopName" />
      <c-list-item :span="2" type="text" label="门店地址" :value="shopDetail.shopAddress" />
      <c-list-item dict-type-code="SHOP_BIZ_STATE" type="text" label="门店营业状态" :value="shopDetail.shopBizState" />
      <c-list-item type="text" label="门店业务类型" :value="shopDetail.businessTypeName" />
      <c-list-item type="text" label="市场层级" :value="shopDetail.marketLevelName" />
      <c-list-item type="text" label="门店面积(㎡)" :value="shopDetail.operateArea" />
      <c-list-item type="text" label="客户编码" :value="shopDetail.customerCode" />
      <c-list-item type="text" label="客户名称" :span="2" :value="shopDetail.customerName" />
      <c-list-item type="text" label="经销商姓名" :value="shopDetail.customerLinkMan" />
      <c-list-item type="text" label="办事处" :value="shopDetail.officeName" />
      <c-list-item type="text" label="办事处客服主管" :value="shopDetail.officeLinkMan" />
      <c-list-item type="text" label="办事处客服主管电话" :value="shopDetail.officeLinkPhone" />
      <c-list-item type="text" label="成品客户经理" :value="shopDetail.finishedManagerName" />
      <c-list-item type="text" label="成品客户经理电话" :value="shopDetail.finishedManagerPhone" />
      <c-list-item type="text" label="定制客户经理" :value="shopDetail.customManagerName" />
      <c-list-item type="text" label="定制客户经理电话" :value="shopDetail.customManagerPhone" />
    </c-list>
    <div class="qup-title-box"><span class="border" /><span>走访整改信息</span></div>
    <c-list
      ref="form"
      v-loading="detailLoading"
      label-width="130px"
      :column="3"
    >
      <c-list-item type="text" label="走访整改任务号" :value="detailData.rectifyNo" />
      <c-list-item dict-type-code="PATROL_QUESTION_STATUS" type="text" label="走访整改进度" :value="detailData.schedule" />
      <c-list-item type="text" label="走访任务号" :value="detailData.patrolTaskNo" />
      <c-list-item type="text" label="整改问题分类" dict-type-code="RECTIFICATION_CLASSIFICATION" :value="detailData.classification" />
      <c-list-item type="text" label="应整改完成时间" :value="detailData.planCompletionDate" />
    </c-list>
  </div>
</template>
<script>
import { getShopDetailByCode, queryFormDetailById } from '@/api/marketService/dailyPatrol'
export default {
  name: 'BaseInfo',
  components: {},
  props: {
    shopCode: {
      type: String,
      default: ''
    },
    patrolId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      baseInfoLoading: false,
      detailLoading: false,
      detailData: {},
      shopDetail: {}
    }
  },
  watch: {
    shopCode: {
      handler(v) {
        if (!v) return
        this.handelQueryShopData(v)
      },
      deep: true,
      immediate: true
    },
    patrolId: {
      handler(v) {
        if (!v) return
        this.handelQueryPatrolData(v)
      },
      deep: true,
      immediate: true
    }
  },

  methods: {
    handelQueryPatrolData(v) {
      this.detailLoading = true
      queryFormDetailById(v).then(res => {
        const { classification, planCompletionDate, rectifyNo } = this.$route.query
        if (res.success) this.detailData = { ...res.data, classification, planCompletionDate, rectifyNo }
        this.detailLoading = false
      }).catch(() => {
        this.detailLoading = false
      })
    },
    handelQueryShopData(shopCode) {
      this.baseInfoLoading = true
      getShopDetailByCode(shopCode).then(res => {
        if (res.success) {
          this.shopDetail = res.data
        }
        this.baseInfoLoading = false
      }).catch(() => {
        this.baseInfoLoading = false
      })
    }
  }
}
</script>
